<template>
  <div class="nav-box">
    <ul class="nav-ul">
      <router-link to="/Home/Tushu" active-class="active"><li>图书</li></router-link>
      <router-link to="/apparel" active-class="active"><li>服饰</li></router-link>
      <router-link to="/electronic" active-class="active"><li>电子</li></router-link>
      <router-link to="/original" active-class="active"><li>原创商品</li></router-link>
    </ul>
  </div>
</template>
<script>
export default {
  name: "Nav",
  data() {
    return {};
  },
};
</script>
<style>
.nav-box{
    height: .5rem;
    background-color: #fff;
}
.nav-box .nav-ul {
  font-size: 18px;
  height: 0.6rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #999;
  padding-bottom: .2rem;
  /* border-bottom: .01rem solid #999; */
}
.nav-box .nav-ul li{
    height: .6rem;
    line-height: .6rem;
}
.active{
color: #000;
font-weight: 700;
}
.active li{
  border-bottom: .02rem solid black;
}
</style>